<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>创建组件</title>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">

			//3.使用html标签的样式，展示组件；
			<com1></com1>

			<com2></com2>
			<com3></com3>
			<com4></com4>
			
			私有组件；<br />
			<login></login>

		</div>

		<template id="temp1">

			<div>
				<h1> 这是三种创建的组件</h1>

			</div>

		</template>
		
		<template id="login">
			
			<div style="border:dotted 1px;">
				
				<p>
					用户名：<input type="text" v-model="userName"/>
					
				</p>
				<p>
					密码：<input type="password" v-model="userPwd" />
					
				</p>
				<p>
					<button @click="toast" >提交</button>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<button @click="clear">清除</button>
				</p>
			</div>
			
		</template>

		<script>
			//全局组件；
			//创建组件 template中只能有一个根html元素；
			//1.
			var com1 = Vue.extend({
				template: "<h1>创建的组件</h1>"
			})
			//2.
			Vue.component("com1", com1)

			// 第二种方式：
			Vue.component("com2", Vue.extend({
				template: "<h2>第一种方式少写一步的方法创建的组件</h2>"
			}))

			// 第二种方式；

			Vue.component("com3", {
				template: "<h3>这是第三种方式</h3>"
			})

			//错误 ,template，有且只能有一个根元素；
			//可以用div进行包裹。解决；

			//			Vue.component("com3",{
			//				template:"<h3>这是第三种方式</h3><span>sdfsdf</span>"
			//			})

			Vue.component("com3", {
				template: "<div><h3>这是第三种方式</h3><span>sdfsdf</span></div>"
			})

			//第三种方式；

			Vue.component("com4", {

				template: "#temp1"
			})

			
			
			


			var vm = new Vue({
				el: "#app",
				data: {

				},
				methods: {

				},
				components: {
					//定义私有组件；
					//组件的data，必须是一个function
					//还必须返回一个对象；
					login:{
						template:"#login",
						data:function(){
							return {
								userName:"userName",
								userPwd:"userPwd"
							
							}
						},
						
						methods:{
							toast(){
								alert(this.userName+":"+this.userPwd)
							},
							clear(){
								this.userName = ""
								this.userPwd = ""
							}
						}
						
					}
		
				}

			});
		</script>
	</body>

</html>